<template>
  <div class='config-control-container'>
    <el-dialog :visible.sync="visible"
               width="660px"
               :title="'配置控件'"
               :close-on-click-modal="false"
               @close="dialogClose">
      <el-form :model="configControlForm.control_cfg"
               ref="itemForm"
               :rules="formRules"
               label-width="100px">
        <div v-if="configControlForm.control_type==='16' || configControlForm.control_type==='17'"
             class="config-form">
          <el-tabs v-model="configControlForm.control_cfg.value_type">
            <el-tab-pane label="自由值"
                         name="1">
              <el-form-item label="内容校验"
                            v-if="configControlForm.control_type==='16'"
                            prop="validate">
                <el-select v-model="configControlForm.control_cfg.content_valid_type">
                  <el-option label="不校验"
                             value="no"></el-option>
                  <el-option label="手机号"
                             value="phone"></el-option>
                  <el-option label="身份证号"
                             value="id_card"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="字符长度"
                            v-if="configControlForm.control_cfg.content_valid_type==='no'">
                <div class="inline-item">
                  <el-input-number controls-position="right"
                                   :max="configControlForm.control_cfg.max"
                                   v-model="configControlForm.control_cfg.min"></el-input-number>
                  <span>至</span>
                  <el-input-number controls-position="right"
                                   :min="configControlForm.control_cfg.min"
                                   v-model="configControlForm.control_cfg.max"></el-input-number>
                </div>
              </el-form-item>
              <!-- <el-form-item label="允许复制">
                <el-select v-model="configControlForm.control_cfg.is_copy">
                  <el-option label="关闭"
                             value="0"></el-option>
                  <el-option label="开启"
                             value="1"></el-option>
                </el-select>
              </el-form-item> -->
            </el-tab-pane>
            <el-tab-pane label="固定值"
                         name="2">
              <el-form-item prop="textVal"
                            v-if="configControlForm.control_cfg.value_type==='2'"
                            label="内容值">
                <el-input v-model="configControlForm.control_cfg.textVal"></el-input>
              </el-form-item>
            </el-tab-pane>
          </el-tabs>
        </div>
        <!-- 数字框 -->
        <div v-if="configControlForm.control_type==='18'"
             class="config-form">
          <el-form-item label="保留小数位">
            <el-input v-model="configControlForm.control_cfg.float_num"></el-input>
          </el-form-item>
          <!-- <el-form-item label="允许复制">
            <el-select v-model="configControlForm.control_cfg.is_copy">
              <el-option label="关闭"
                         value="0"></el-option>
              <el-option label="开启"
                         value="1"></el-option>
            </el-select>
          </el-form-item> -->
        </div>
        <!-- 时间选择框 -->
        <div v-if="configControlForm.control_type==='19'"
             class="config-form">
          <el-form-item label="类型">
            <el-select v-model="configControlForm.control_cfg.date_type">
              <el-option label="无跨度选择"
                         value="1"></el-option>
              <el-option label="有跨度选择"
                         value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间格式">
            <el-select v-model="configControlForm.control_cfg.date_fmt">
              <el-option label="年月"
                         value="1">
              </el-option>
              <el-option label="年月日"
                         value="2">
              </el-option>
              <el-option label="年月日时分"
                         value="3">
              </el-option>
              <el-option label="年月日时分秒"
                         value="4">
              </el-option>
              <el-option label="时分秒"
                         value="5">
              </el-option>

            </el-select>
          </el-form-item>
          <el-form-item>
            <el-checkbox true-label="1"
                         false-label="0"
                         v-model="configControlForm.control_cfg.is_current_time">是否默认当前时间</el-checkbox>
          </el-form-item>
        </div>
        <!-- 标签选择框 -->
        <div v-if="configControlForm.control_type==='20'"
             class="config-form">
          <el-form-item label="选择类型"
                        prop="select_type">
            <el-select v-model="configControlForm.control_cfg.select_type">
              <el-option label="单选"
                         value="1"></el-option>
              <el-option label="多选"
                         value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签名称">
            <el-button @click="addSelectLabelItem"
                       type="primary">新增</el-button>
            <div class="label-name-list">
              <div v-for="(item,index) in configControlForm.control_cfg.labels"
                   :key="item.key"
                   class="label-name-item">
                <el-input maxlength="6"
                          show-word-limit
                          v-model="item.value"></el-input>
                <span @click="deleteSelectLabel(index)">删除</span>
              </div>
            </div>
          </el-form-item>
        </div>
        <!-- 选择控件 -->
        <div v-if="configControlForm.control_type==='21'"
             class="config-form">
          <el-form-item label="选择类型"
                        prop="data_select_type">
            <el-select v-model="configControlForm.control_cfg.data_select_type">
              <el-option label="下拉框"
                         value="1"></el-option>
              <el-option label="单选框"
                         value="2"></el-option>
              <el-option label="多选框"
                         value="3"></el-option>
              <el-option label="级联选择"
                         value="4"></el-option>
              <el-option label="数据搜索框"
                         value="5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="接口"
                        v-if="configControlForm.control_cfg.data_select_type==='4'"
                        prop="data_origin_url">
            <el-input v-model="configControlForm.control_cfg.data_origin_url"
                      placeholder="请输入接口地址"></el-input>
          </el-form-item>
          <el-form-item v-if="configControlForm.control_cfg.data_select_type==='4'">
            <el-button @click="addCascadeItem"
                       type="primary">新增</el-button>
            <div class="label-name-list">
              <div v-for="(item,index) in configControlForm.control_cfg.cascadeOptions"
                   :key="item.key"
                   class="label-name-item">
                <el-input v-model="item.value"></el-input>
                <span @click="deleteCascadeItem(index)">删除</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="选项来源"
                        v-if="configControlForm.control_cfg.data_select_type!=='4'"
                        prop="data_type">
            <el-select v-model="configControlForm.control_cfg.data_type"
                       @change="selectDataType">
              <el-option label="自定义数据"
                         value="1"></el-option>
              <el-option label="标准码"
                         value="2"></el-option>
              <el-option label="接口"
                         value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item v-if="configControlForm.control_cfg.data_select_type!=='4'">
            <el-button @click="addDataTypeItem"
                       v-if="configControlForm.control_cfg.data_type==='1'"
                       type="primary">新增</el-button>
            <div class="label-name-list">
              <div v-for="(item,index) in configControlForm.control_cfg.datas"
                   :key="item.key"
                   class="label-name-item">
                <el-input v-model="item.value"></el-input>
                <span @click="deleteSelectData(index)"
                      v-if="configControlForm.control_cfg.data_type==='1'">删除</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item v-if="configControlForm.control_cfg.data_select_type==='5'">
            <el-checkbox true-label="1"
                         false-label="0"
                         v-model="configControlForm.control_cfg.search_input_default">显示默认值</el-checkbox>
          </el-form-item>
          <el-form-item label="">
            <el-checkbox true-label="1"
                         false-label="0"
                         v-model="configControlForm.control_cfg.show_default_value">默认显示上一次选择</el-checkbox>
          </el-form-item>
        </div>
        <!-- 上传控件 -->
        <div v-if="configControlForm.control_type==='22'"
             class="config-form">
          <el-form-item label="类型"
                        prop="up_type">
            <el-select v-model="configControlForm.control_cfg.up_type"
                       @change="test">
              <el-option value="1"
                         label="文件"></el-option>
              <el-option value="2"
                         label="图片"></el-option>
              <!-- <el-option value="3"
                         label="拍照"></el-option> -->
              <el-option value="4"
                         label="视频"></el-option>
              <el-option value="5"
                         label="录音"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="configControlForm.control_cfg.up_type==='2'"
                        label="选择途径"
                        prop="upload_img_type">
            <el-select v-model="configControlForm.control_cfg.upload_img_type"
                       placeholder="请选择图片选择途径">
              <el-option label="相册"
                         value="1"></el-option>
              <el-option label="拍照"
                         value="2"></el-option>
              <el-option label="相册及拍照"
                         value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数量"
                        prop="num">
            <div class="inline-item">
              <el-input-number controls-position="right"
                               v-model="configControlForm.control_cfg.num"></el-input-number>
              <span>个</span>
            </div>
          </el-form-item>
          <el-form-item label="大小"
                        prop="size">
            <div class="inline-item">
              <el-input-number controls-position="right"
                               v-model="configControlForm.control_cfg.size"></el-input-number>
              <span>M</span>
            </div>
          </el-form-item>
          <el-form-item label="是否压缩"
                        v-if="configControlForm.control_cfg.up_type==='2'">
            <div class="inline-item">
              <el-checkbox true-label="1"
                           false-label="0"
                           v-model="configControlForm.control_cfg.is_compress"></el-checkbox>
            </div>
          </el-form-item>
          <!-- <el-form-item label="使用工程云"
                        prop="use_engin_cloud">
            <div class="inline-item">
              <el-switch v-model="configControlForm.control_cfg.use_engin_cloud"
                         active-color="#13ce66"
                         :active-value="1"
                         :inactive-value="0"
                         inactive-color="#ff4949">
              </el-switch>
            </div>
          </el-form-item> -->
        </div>
        <!-- 扫码控件 -->
        <div v-if="configControlForm.control_type==='23'"
             class="config-form">
          <el-form-item label="类型"
                        prop="scan_type">
            <el-select v-model="configControlForm.control_cfg.scan_type">
              <el-option label="人员码"
                         value="1"></el-option>
              <el-option label="条形码"
                         value="2"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="允许复制"
                        prop="is_copy">
            <el-select v-model="configControlForm.control_cfg.is_copy">
              <el-option label="否"
                         value="0"></el-option>
              <el-option label="是"
                         value="1"></el-option>
            </el-select>
          </el-form-item> -->
        </div>
        <!-- 注释说明 -->
        <div v-if="configControlForm.control_type==='24'"
             class="config-form">
          <el-tabs v-model="configControlForm.control_cfg.note_value_type">

            <el-tab-pane label="固定值"
                         name="1">
              <el-form-item label="注释内容"
                            v-if="configControlForm.control_cfg.note_value_type==='1'"
                            prop="content">
                <el-input type="textarea"
                          v-model="configControlForm.control_cfg.content"></el-input>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="示意图"
                         name="2">
              <el-form-item label="上传图片"
                            v-if="configControlForm.control_cfg.note_value_type==='2'"
                            prop="content_img">
                <el-upload class="business-logo-upload img-upload"
                           :http-request="uploadContentImg"
                           action=""
                           :show-file-list="false"
                           accept="jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF">
                  <img :src="configControlForm.control_cfg.content_img"
                       v-if="configControlForm.control_cfg.content_img"
                       class="logo">
                  <i v-else
                     class="el-icon-plus logo-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-tab-pane>
          </el-tabs>

        </div>
        <!-- 计分控件 -->
        <div v-if="configControlForm.control_type==='25'"
             class="config-form">
          <el-form-item label="计算公式"
                        prop="score_way">
            <el-select v-model="configControlForm.control_cfg.score_way">
              <el-option v-for="item in scoreControlCode"
                         :key="item.code_id"
                         :value="item.value"
                         :label="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="应得分"
                        prop="score">
            <el-input v-model="configControlForm.control_cfg.score"
                      placeholder="请输入应得分"></el-input>
          </el-form-item>
          <el-form-item v-if="configControlForm.control_cfg.score_way==='1'"
                        label="权重"
                        prop="weight">
            <el-input v-model="configControlForm.control_cfg.weight"
                      placeholder="请输入权重"></el-input>
          </el-form-item>
        </div>
        <!-- 位置控件 -->
        <div v-if="configControlForm.control_type==='27'"
             class="config-form">
          <el-form-item label="类型"
                        prop="location_type">
            <el-select v-model="configControlForm.control_cfg.location_way"
                       placeholder="请选择位置选择类型">
              <el-option label="地图选择"
                         value="1"></el-option>
              <el-option label="当前定位"
                         value="2"></el-option>
              <el-option label="手动输入"
                         value="3"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <!-- 人员选择器 -->
        <div v-if="configControlForm.control_type==='28'"
             class="config-form">
          <el-form-item label="数据来源"
                        prop="user_way">
            <el-select v-model="configControlForm.control_cfg.user_way"
                       placeholder="请选择人员数据来源">
              <el-option label="公司"
                         value="1"></el-option>
              <el-option label="项目"
                         value="2"></el-option>

            </el-select>
          </el-form-item>
        </div>
        <!-- v1.7.0 业务数据选择控件-->
        <div v-if="configControlForm.control_type==='31'">
          <el-form-item label="实体配置"
                        prop="business_ent_data_id">
            <el-select v-model="configControlForm.control_cfg.business_ent_data_id"
                       placeholder="请选择实体配置">
              <el-option v-for="item in entityConfigList"
                         :key="item.ent_data_id"
                         :value="item.ent_data_id"
                         :label="item.form_name"></el-option>

            </el-select>
          </el-form-item>
        </div>
        <!-- v1.7.3 选项自定义控件 -->
        <div v-if="configControlForm.control_type==='36'">
          <el-form-item label="控件名称">
            <el-input v-model="configControlForm.control_cfg.control_name"
                      placeholder="请输入控件名称"></el-input>
          </el-form-item>
          <el-form-item label="数据范围"
                        prop="data_range_type">
            <el-select v-model="configControlForm.control_cfg.data_range_type"
                       placeholder="请选择实体配置">
              <el-option v-for="item in dataRangeList"
                         :key="item.label"
                         :value="item.value"
                         :label="item.label"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-checkbox true-label="1"
                         false-label="0"
                         v-model="configControlForm.control_cfg.show_default_value">默认显示上一次选择</el-checkbox>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <el-button @click="configControl"
                   type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { standardCodeApi } from '@/services/StandardCode'
import { UploadFileApi } from '@/services/UserPermission'
import { ConfigEntityApi } from '@/services/SystemSetting'
export default {
  data () {
    return {
      visible: false,
      configControlForm: {
        control_type: '',
        control_cfg: {
          use_engin_cloud: 0,//使用工程云
          value_type: '',
          content_valid_type: '',
          min: '',
          max: '',
          is_copy: '',
          float_num: '',
          date_type: '',
          date_fmt: '',
          select_type: '', //标签类型
          labels: [
            // { key: 1, value: '合格' }
          ], //标签名称列表
          data_type: '', //数据来源类型
          datas: [],
          data_origin_url: '',
          // 级联选择配置项
          cascadeOptions: [],
          up_type: '',
          num: '',
          size: '',
          scan_type: '',
          content: '',
          location_way: '',
          user_way: '',
          search_input_default: '',
          show_default_value: '',
          note_value_type: '1',
          content_img: '',
          is_current_time: '',
          business_ent_data_id: '',
          // 是否压缩
          is_compress: '1'
        }
      },
      formRules: {
        textVal: [
          { required: true, message: '请输入固定值', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入注释说明', trigger: 'blur' }
        ],
        score: [
          { required: true, message: '请输入应得分', trigger: 'blur' }
        ],
        weight: [
          { required: true, message: '请输入权重', trigger: 'blur' }
        ],
        data_origin_url: [
          { required: true, message: '请输入链接地址', trigger: 'blur' }
        ],
        business_ent_data_id: [
          { required: true, message: '请选择实体配置', trigger: 'change' }
        ]
      },
      resetForm: {
        control_type: '',
        control_cfg: {
          value_type: '',
          content_valid_type: '',
          min: '',
          max: '',
          is_copy: '',
          float_num: '',
          date_type: '',
          date_fmt: '',
          select_type: '', //标签类型
          labels: [
            // { key: 1, value: '合格' }
          ], //标签名称列表
          data_type: '', //数据来源类型
          datas: [],
          data_origin_url: '',
          cascadeOptions: [],
          up_type: '',
          num: '',
          size: '',
          scan_type: '',
          content: '',
          location_way: '',
          user_way: '',
          search_input_default: '',
          note_value_type: '1',
          content_img: '',
          is_current_time: '',
          business_ent_data_id: '',
          // 是否压缩
          is_compress: '1'
        }
      },
      // 计分方式标准码
      scoreControlCode: [],
      // 实体数据配置列表
      entityConfigList: [],
      // 1.7.3 数据范围
      dataRangeList: [
        { label: '全局可用', value: '1' },
        { label: '单位可用', value: '2' },
        { label: '项目可用', value: '3' },
        { label: '个人可用', value: '4' },
      ]
    }
  },
  props: {
    dialogVisible: {
      type: Boolean
    },

    dialogForm: {
      type: Object
    },
    callback: {
      type: Function
    }
  },
  watch: {
    dialogVisible (newval) {
      this.visible = newval;
    },
    dialogForm: {
      handler (newval, oldval) {
        // let temp = JSON.parse(JSON.stringify(newval));
        let temp = newval
        let reset = JSON.parse(JSON.stringify(this.resetForm))
        temp.control_cfg.value_type = temp.control_cfg.value_type || '1'
        this.configControlForm = temp
        this.configControlForm.control_cfg.use_engin_cloud = newval.is_gcy
        if (this.configControlForm.control_cfg.is_compress === undefined) {
          this.configControlForm.control_cfg.is_compress = '1'
        }
        if (this.configControlForm.ent_id) {
          this.getEntityConfigList()
        }

      },
      deep: true
    }
  },
  methods: {
    test () {
      console.log(this.configControlForm.control_cfg, '00')
    },
    // 上传注释说明中的示意图
    uploadContentImg (params) {
      let formData = new FormData()
      formData.append('module', 'checkitem-img')
      formData.append('pic_file_apk', params.file)
      UploadFileApi.uploadFile({
        data: formData
      }).then(res => {
        // console.log(res, 'upload business img')
        if (res.data) {
          this.configControlForm.control_cfg.content_img = res.data.file_path
          console.log(this.configControlForm, '111')
        }

      })
    },
    // 添加级联选择配置项
    addCascadeItem () {
      let len = this.configControlForm.control_cfg.cascadeOptions.length
      let last = len > 0 ? this.configControlForm.control_cfg.cascadeOptions[len - 1] : { key: 0 }
      let obj = {
        key: last.key + 1,
        value: ''
      }
      this.configControlForm.control_cfg.cascadeOptions.push(obj)
    },
    // 删除级联选择配置项
    deleteCascadeItem (index) {
      this.configControlForm.control_cfg.cascadeOptions.splice(index, 1)
    },
    dialogClose () {
      this.$emit("update:dialogVisible", false);
    },
    // 添加标签选择器标签名称
    addSelectLabelItem () {
      let len = this.configControlForm.control_cfg.labels.length
      let last = len > 0 ? this.configControlForm.control_cfg.labels[len - 1] : { key: 0 }
      if (len < 5) {
        let obj = {
          key: last.key + 1,
          value: ''
        }
        this.configControlForm.control_cfg.labels.push(obj)
      } else {
        this.$message.warning('最多添加5个标签')
      }

    },
    // 删除标签选择器标签名称
    deleteSelectLabel (index) {
      this.configControlForm.control_cfg.labels.splice(index, 1)
    },
    // 添加数据来源选项
    addDataTypeItem () {
      let len = this.configControlForm.control_cfg.datas.length
      let last = len > 0 ? this.configControlForm.control_cfg.datas[len - 1] : { key: 0 }
      let obj = {
        key: last.key + 1,
        value: ''
      }
      this.configControlForm.control_cfg.datas.push(obj)
    },
    // 删除数据来源自定义数据
    deleteSelectData (index) {
      this.configControlForm.control_cfg.datas.splice(index, 1)
    },
    // 选择数据来源
    selectDataType (val) {
      let cur = this.configControlForm.control_cfg.datas
      if (val === '1') {
        this.configControlForm.control_cfg.datas = []
      } else if (val === '2') {
        this.configControlForm.control_cfg.datas = [{ key: 'code', value: '' }]
      } else {
        this.configControlForm.control_cfg.datas = [{ key: 'url', value: '' }]
      }
    },
    configControl () {
      this.$refs.itemForm.validate((valid) => {
        if (valid) {
          let flag = true
          // 当控件类型为选择控件时，判断是否填写
          if (this.configControlForm.control_type === '21') {
            let datas = []
            if (this.configControlForm.control_cfg.data_select_type === '4') {
              datas = this.configControlForm.control_cfg.cascadeOptions
            } else {
              datas = this.configControlForm.control_cfg.datas
            }

            if (datas.length === 0) {
              flag = false
            } else {
              datas.map((item) => {
                if (item.value === '') flag = false
              })
            }
          }
          // 当控件类型为标签选择控件时，判断是否填写
          if (this.configControlForm.control_type === '20') {
            let labels = this.configControlForm.control_cfg.labels
            if (labels.length === 0) {
              flag = false
            } else {
              labels.map((item) => {
                if (item.value === '') flag = false
              })
            }
          }
          if (flag) {
            this.$emit('callback', this.configControlForm)
            this.dialogClose()
          } else {
            this.$message.warning('请完善表单')
          }

        }
      })
    },
    // 获取计分方式标准码
    getScoreControlCode () {
      return standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'score_control'
        }
      }).then(res => {

        if (res.code === 0 && res.data.list) {
          this.scoreControlCode = res.data.list
          window.localStorage.setItem('scoreControlCode', JSON.stringify(res.data.list))

        }
      })
    },
    // 获取实体配置列表
    getEntityConfigList () {
      ConfigEntityApi.getEntityConfigList({
        params: {
          ent_id: this.configControlForm.ent_id,
          is_page: 0
        }
      }).then(res => {
        if (res.code === 0) {
          this.entityConfigList = res.data
        }
      })
    }
  },

  async created () {
    let scoreControlCodeLocal = window.localStorage.getItem('scoreControlCode')
    if (scoreControlCodeLocal) {
      this.scoreControlCode = JSON.parse(scoreControlCodeLocal)
    } else {
      await this.getScoreControlCode()
    }
  },
  mounted () {
  }
}
</script>
<style scoped lang='scss'>
.config-control-container {
  .el-select,
  .el-input {
    width: 100%;
  }
  .inline-item {
    .el-input-number {
      width: 150px;
    }
    span {
      margin: 0 20px;
    }
  }
  .img-upload {
    width: 178px;
    height: 178px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    &:hover {
      border-color: #409eff;
    }
    .logo-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .logo {
      width: 178px;
      height: 178px;
      display: block;
    }
  }
  .label-name-list {
    .label-name-item {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        width: 80px;
        cursor: pointer;
        color: #1890ff;
        text-align: center;
      }
    }
  }
}
</style>
